<template>
  <a-menu
    theme="dark"
    mode="inline"
    :selectedKeys="selectedKeys"
    :openKeys="openKeys"
    @select="handleSelect"
    @openChange="handleOpenChange"
  >
    <template v-for="item in menuConfig" :key="item.key">
      <template v-if="item.children">
        <a-sub-menu :key="item.key" :title="item.title">
          <template #icon>
            <component :is="item.icon" />
          </template>
          <template v-for="child in item.children" :key="child.key">
            <template v-if="child.children">
              <a-sub-menu :key="child.key" :title="child.title">
                <template #icon>
                  <component :is="child.icon" />
                </template>
                <a-menu-item
                  v-for="grandChild in child.children"
                  :key="grandChild.key"
                  :route="grandChild.route"
                >
                  <template #icon>
                    <component :is="grandChild.icon" />
                  </template>
                  {{ grandChild.title }}
                </a-menu-item>
              </a-sub-menu>
            </template>
            <a-menu-item v-else :key="child.key" :route="child.route">
              <template #icon>
                <component :is="child.icon" />
              </template>
              {{ child.title }}
            </a-menu-item>
          </template>
        </a-sub-menu>
      </template>
      <a-menu-item v-else :key="item.key" :route="item.route">
        <template #icon>
          <component :is="item.icon" />
        </template>
        {{ item.title }}
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';

const props = defineProps({
  menuConfig: {
    type: Array,
    default: () => [
      {
        key: '1',
        title: '菜单项1',
        icon: UserOutlined,
        route: { path: '/menu1' },
      },
      {
        key: '2',
        title: '子菜单1',
        icon: VideoCameraOutlined,
        children: [
          {
            key: '2-1',
            title: '子菜单项1',
            icon: UploadOutlined,
            route: { path: '/menu2-1' },
          },
          {
            key: '2-2',
            title: '子菜单2',
            icon: UploadOutlined,
            children: [
              {
                key: '2-2-1',
                title: '孙菜单项1',
                icon: UploadOutlined,
                route: { path: '/menu2-2-1' },
              },
            ],
          },
        ],
      },
    ],
  },
});

const route = useRoute();
const router = useRouter();

const selectedKeys = ref([]);
const openKeys = ref([]);

const handleSelect = (e) => {
  router.push(e.keyPath.at(-1));
};

const handleOpenChange = (keys) => {
  openKeys.value = keys;
  
};

onMounted(() => {

  // 路由刷新后恢复激活状态
  const path = route.path;
  const findKeyByPath = (items) => {
    for (const item of items) {
      if (item.route && item.route.path === path) {
        return item.key;
      }
      if (item.children) {
        const result = findKeyByPath(item.children);
        if (result) {
          return result;
        }
      }
    }
    return null;
  };

  const selectedKey = findKeyByPath(props.menuConfig);
  if (selectedKey) {
    selectedKeys.value = [selectedKey];
  }
});
</script>